/**
* @FileDescription:文本输入框
* @Author:作者信息
* @Date:2020-05-26
* @LastEditors:作者信息
* @LastEditTime:2021-09-0710:30:00
*/
<template>
  <div
    class="input components-form tetris-1px-b"
    :class="{ border: border, padding: padding }"
  >
    <van-field
      ref="input"
      v-model.trim="innerValue"
      :border="false"
      input-align="right"
      clearable
      :label="title"
      :style="{ color: valueColor }"
      :is-link="showRightArrow"
      :placeholder="placeholder"
      :disabled="disabled"
      @change="changeValue"
      @blur="blur"
      @clear="clear"
      :type="type"
      :maxlength="maxlength"
      :autosize="autosize"
      :rows="rows"
      :formatter="inputFn"
    />
  </div>
</template>
<script>
export default {
  /**
   * 文本输入框
   * 创建原因：如果不用组件包装起来，在外层直接控制样式，会导致底部边框有问题
   * props
   * value: 值
   * valueColor:值的字体颜色
   * title:标题名称
   * border: 是否显示下边框 默认false
   * showRightArrow 是否展示右侧箭头
   * placeholder：占位符提示语
   * padding: 是否默认padding默认false( false两边无padding，由父级盒子定义两边的padding值 )
   *false---两侧边框顶头
   * disabled 是否禁用
   * reg 正则处理数据公式
   */
  props: {
    value: [String, Number],
    title: {
      type: String,
      default: '文本输入框'
    },
    type: {
      type: String,
      default: 'text'
    },
    maxlength: [String, Number],
    valueColor: {
      type: String,
      default: '#333'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    showRightArrow: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    padding: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autosize: {
      type: Boolean,
      default: true
    },
    rows: {
      type: String,
      default: '1'
    },
    changeFn: Function,
    inputFn: Function
  },
  data () {
    return {
      innerValue: ''
    }
  },
  methods: {
    changeValue (event) {
      this.innerValue = event.target.value
      if (this.changeFn) {
        this.innerValue = this.changeFn(event.target.value)
      }
      this.$emit('value-change', this.innerValue)
    },
    inputValue () {
    },
    blur () {
      // console.log('input失焦value:'+this.value+'innerValue:'+this.innerValue)
      // 解决ios在设置了max-length之后无法触发change事件
      if (this.value !== this.innerValue) {
        if (this.changeFn) {
          this.innerValue = this.changeFn(event.target.value)
        }
        this.$emit('value-change', this.innerValue)
      }
    },
    clear () {
      this.$emit('value-change', '')
    }
  },
//   directives: {
//     //解决ios中input键盘之后页面高度不正确问题
//     inputBlurIOS,
//   },
  created () {
    this.innerValue = this.value
  },
  watch: {
    value (newValue) {
      this.innerValue = newValue
    }
  }
}
</script>
<style lang= 'less' scoped>
@import "../../../config/style/common.less";

.input {
  ::v-deep .van-field {
    .van-field__control {
      &::placeholder {
        font-size: 0.426667rem /* 32/75 */;
        color: #999;
      }
    }
  }
}
</style>
